<template>
  <div class="density">
    <div id="hotTable" class="hotTable">
      <HotTable ref="testHot" :settings="hotSettings"></HotTable>
    </div>
  </div>
</template>

<script>
import { HotTable } from "@handsontable/vue";
import "handsontable/dist/handsontable.full.css";
export default {
  data: function () {
    return {
      liquidDensityData:'',
      densityFittingList:[],
      root: "test-hot",
      hotSettings: {
         licenseKey:'non-commercial-and-evaluation',
        //数据可以是二维数组，也可以是数组对象
        data: [],
        startCols: 2,
        minRows: 4, //最小行列
        // maxRows: 20, //最大行列
        fixedColumnsLeft:2, //固定左侧多少列不能水平滚动
        rowHeaders: true, //行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。
        colHeaders: [" 温度", " 密度"], //自定义列表头or 布尔值
        colWidths:[100,100],//[列宽1，列宽2，...]/列宽值
        minSpareCols: 0, //列留白
        minSpareRows: 0, //行留白
        currentRowClassName: "currentRow", //为选中行添加类名，可以更改样式
        currentColClassName: "currentCol", //为选中列添加类名
        autoWrapRow: true, //自动换行
        contextMenu: {
          //自定义右键菜单，可汉化，默认布尔值
          items: {
            row_above: {
              name: "上方插入一行",
            },
            row_below: {
              name: "下方插入一行",
            },
            hsep1: "---------", //提供分隔线
            remove_row: {
              name: "删除行",
            },
          },
        }, //右键效果
        fillHandle: true, //选中拖拽复 possible values: true, false, "horizontal", "vertical"
        fixedColumnsLeft: 0, //固定左边列数
        fixedRowsTop: 0, //固定上边列数
        columns: [
          //添加每一列的数据类型和一些配置
          { data: 'temperature',type: "numeric" }, //数值
          { data: 'density',type: "numeric",
          }, //指定的数据格式
        ],
        afterChange: function (changes, source) {
          //数据改变时触发此方法
          console.log(321)
          console.log(this.getSourceData());
        },
      },
    };
  },
  name: "handsonTable",
  components: {
    HotTable,
  },
  mounted() {
  },
  created() {
    this.liquidDensityData = JSON.parse(window.sessionStorage.getItem("liquidDensityData"));
    this.hotSettings.data = this.liquidDensityData.densityFittingList;
  },
  methods: {

  },
};
</script>
<style>

</style>
